<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>注册</title>
  <script src="/js/jquery-3.5.1.min.js"></script>
  <style>
    body {
      margin: 0 auto;
      height: 100%;
      width: 100%;
    }

    body::after {
      top: 0;
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background: url(bj2.png);
      background-size: cover;
      filter: blur(1px);
    }


    .content {
      width: 320px;
      margin: 150px auto 50px;
      background:rgba(255, 255, 255, 0.6);
      padding: 20px 30px 40px;
      font-size: 14px;
      border-radius: 4px;
      position: relative;
      z-index: 1;
    }

    .title {
      font-size: 18px;
      text-align: center;
      font-weight: bold;
      line-height: 3;
    }

    .flex {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

    }

    input,
    button {
      outline: none;
      border-radius: 4px;
    }

    input {
      height: 40px;
      box-sizing: border-box;
      padding: 0 10px;
      color: #323232;
      flex: 1;
      border: 1px solid #ddd;
      background: #f6f6f6;
    }

    input::placeholder{
      color: #323232;
    }

    input:hover {
      background: #fff;
    }

    .button,
    .button2 {
      height: 40px;
      color: #fff;
      background: #7e77c5;
      border: none;
      font-size: 14px;
      cursor: pointer;
    }

    .button {
      width: 100%;
      font-size: 16px;
    }

    .button2 {
      border-radius: 0 4px 4px 0;
    }

    .input2 {
      border-radius: 4px 0 0 4px;
    }

    a {
      color: #323232;
      text-decoration: none;
    }

    button:focus {
      border: none;
    }

    button:hover {
      background:#5b53b1;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="title">注册</div>
    <div class="flex">
      <!-- <span id="basic-addon1">邮箱</span> -->
      <input placeholder="邮箱" id="mail" name="mail" type="text" aria-describedby="basic-addon1" />
    </div>
    <div class="flex">
      <!-- <span id="basic-addon2">密码</span> -->
      <input placeholder="密码" id="password" name="password" type="password" aria-describedby="basic-addon2" />
    </div>
    <div class="flex">
      <!-- <span id="basic-addon3">确认密码</span> -->
      <input placeholder="确认密码" id="confirmPassword" name="confirmPassword" type="password"
        aria-describedby="basic-addon3" />
    </div>
    <div class="flex">
      <!-- <span id="basic-addon4">验证码</span> -->
      <input class="input2" placeholder="验证码" id="code" name="password" type="text" aria-describedby="basic-addon4" />
      <button class="button2" id="createCode" name="createCode" type="button">获取验证码</button>
    </div>
    <button class="button" id="register" name="register" type="button">注 册</button>

</div>
<script>
    $("#register").click(function() {
        var email=document.getElementById("mail").value;
        var password=document.getElementById("password").value;
        var confirmPassword=document.getElementById("confirmPassword").value;
        var code=document.getElementById("code").value;

        if(password != confirmPassword){
            alert("两次输入的密码不一致，请重新输入！")
            return;
        }
        $.ajax({
            url: "/api/user/register/"+ email + "/" + password + "/" + code,
            type: "GET",
            success: function(data) {
              if(data.code){
                if(data.code == 200){
                  window.location.href='/login.html';
                }else if(data.code == 201) {
                  alert("用户已存在");
                }
                else {
                  alert("注册失败，验证码错误或者已经超时");
                }
              }else{
                window.location.href = '/welcome.html?email=' + email;
              }
            },
            fail: function(data){
              alert(data);
            }
        });
    });

    $('#code').blur(function () {
      var code=document.getElementById("code").value;
      var email=document.getElementById("mail").value;
      $.ajax({
        url: "/api/user/verifyCode/" + email + "/" + code,
        type: "GET",
        success: function(data) {

          if(data.code){
            if(data.code != 200){
              alert(data.msg);
            }
          }else{
            window.location.href = '/welcome.html?email=' + email;
          }
        }
      });
    })

    $("#createCode").click(function() {
        var email=document.getElementById("mail").value;
        time(this);
        $.ajax({
            url: "/api/code/sendCode/" + email,
            type: "GET",
            success: function(data) {
              if(data.code){
                if(data.code == 1001){
                  alert("获取验证码成功，请查看邮件！")
                }else {
                  alert("获取验证码失败！")
                }
              }else{
                window.location.href = '/welcome.html?email=' + email;
              }

            }
        });
    });

    var wait = 60;
    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.innerHTML = "获取验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            o.innerHTML = wait + "秒后可以重新发送";
            wait--;
            setTimeout(function() {
                time(o)
            }, 1000)
        }
    }
</script>
</body>
</html>
